<template>
  <div id="UpdatePersonalInfo">
    <!--         Breadcrumbs -->
    <div class="breadcrumbs" style="margin: 0px;padding-top: 20px;">
      <ul>
        <li class="home"><a href="index.html" title="Go to Home Page"><strong style="font-size: 18px;">我的信息</strong></a>
          <span>/</span>
        </li>
        <li><strong>修改我的信息</strong></li>
      </ul>
    </div>
    <article class="col-main">
      <div class="my-account block block-account" style="padding-left: 20px;">

        <div class="page-title" style="border-bottom: #F1F3F6 1px solid;">
          <h2>修改我的信息</h2>
          <hr>
        </div>

        <form action=">">
          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">编号</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input  v-model="staff.staffId" name="staffNo" class="form-control" readonly="readonly" style="width: 400px;">
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">姓名</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input v-model="staff.staffName" vname="staffName" class="form-control" readonly="readonly" placeholder="请输入员工姓名" style="width: 400px;">
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">性别</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;padding-top: 20px">
              <input v-model="staff.staffSex" type="radio" value="1" name="staffSex" > 男 &nbsp;&nbsp;
              <input v-model="staff.staffSex" type="radio" value="0" name="staffSex" > 女
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">邮箱</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input v-model="staff.staffEmail" readonly="readonly" name="staffEmail" class="form-control" placeholder="请输入员工的邮箱" style="width: 400px;">
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">密码</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input @blur="checkPassword" v-model="staff.staffPassword" type="password" name="staffPassword" class="form-control" placeholder="请输入你的密码" style="width: 400px;">
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">确认密码</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input @blur="checkRePassword" v-model="staff.staffRepassword" type="password" name="staffRepassword" class="form-control" placeholder="请再次输入你的密码" style="width: 400px;">
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">电话</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input v-model="staff.staffTel" name="staffTel" readonly="readonly" class="form-control" placeholder="请输入员工电话" style="width: 400px;">
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">出生日期</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input v-model="staff.staffBirth" name="staffBirth" readonly="readonly" type="date" class="form-control" style="width: 400px;">
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">职位</strong>
            <div style="padding-left: 20px;">
              <span v-for="(role , index) in roles">{{role}} </span>
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">状态</strong>
            <div style="padding-left: 20px;">
              <p>{{ staff.staffState }}</p>
            </div>
          </div>

          <div class="form-group">
            <div style="padding-left: 20px;">

            </div>
          </div>

          <div class="text-center" style="margin-top: 40px;padding-bottom: 30px">
            <input type="button" @click="muStaffInfo" class="btn btn-primary" value="保存">
            <router-link to="PersonalInf" class="btn btn-default">返回</router-link>
          </div>
        </form>

      </div>
    </article>
  </div>
</template>

<script>
export default {
  name: "UpdatePersonalInfo",
  data(){
    return{
      staff:{
        staffId:'',
        staffEmail:'',
        staffName:'',
        staffBirth:'',
        staffHiredate:'',
        staffTel:'',
        staffSex:'',
        staffState:'',
        staffPassword:'',
        staffRepassword:'',
      },
      roles:[]
    }
  },
  methods:{
    getStaff(){
      this.staff = this.$store.getters.getStaff;
    },
    getRole(){
      console.log(this.staff)
      this.$axios.get("/role/loadmyrole",{
        params:{
          staffEmail: this.staff.staffEmail
        }
      }).then(
        res =>{
          this.roles=res.data.data;
        }
      )
    },
    muStaffInfo(){
      if (this.checkPassword()){
        if (this.checkRePassword()){
          console.log(this.staff)
          this.$axios.put("/staff/staffInfo", this.staff).then(
            res=>{
              console.log(res.data)
              this.$router.push("/MemuBar/PersonalInf")
            }
          )
        }
      }

    },
    checkPassword(){
      if (this.staff.staffPassword==null){
        this.$message({
          showClose: true,
          message: '密码不能为空',
          type: 'error'
        });
        return false;
      }else if (this.staff.staffPassword.length>0&&this.staff.staffPassword.length<6){
        this.$message({
          showClose: true,
          message: '密码太短，请重输',
          type: 'error'
        });
        return false;
      }else {
        return true;
      }
    },
    checkRePassword(){
      if (this.staff.staffRepassword==null){
        this.$message({
          showClose: true,
          message: '确认密码不能为空',
          type: 'error'
        });
        return false;
      }else if (this.staff.staffRepassword>0&&this.staff.staffRepassword.length<6){
        this.$message({
          showClose: true,
          message: '确认密码太短，请重输',
          type: 'error'
        });
        return false;
      }else if (this.staff.staffPassword != this.staff.staffRepassword) {
        this.$message({
          showClose: true,
          message: '两次密码不一致',
          type: 'error'
        });
        return false;
      }else {
        return true
      }
    }
  },
  created() {
    this.getStaff();
    this.getRole()
  }
}
</script>

<style scoped>

</style>
